<template>
  <div>
      <h1>当前的和为: {{sum}}</h1>
      <h3>当前值放大10倍后为：{{bigSum}}</h3>
      <h3>我在{{school}} , 学习{{subject}}</h3>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button class="a" @click="increment(n)">+</button>
      <button class="a" @click="decrement(n)">-</button>
      <button @click="incrementOdd(n)">当前和为奇数时再加</button>
      <button @click="incrementWait(n)">等0.6秒再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters, mapMutations, mapActions} from 'vuex'
export default {
    name:'Count',
    data(){
        return{
            n:1,
        }
    },
    computed:{
        // 借助mapState生成计算属性，从State中读取数据，（对象写法）
        // ...mapState({sum:'sum',school:'school',subject:'subject'}), 
        // 借助mapState生成计算属性，从State中读取数据，（数组写法）
        ...mapState(['sum','school','subject']), 
        
        // 借助mapGetters生成计算属性，从getters中读取数据，（对象写法） 
        // ...mapGetters({bigSum:'bigSum'}),
        // 借助mapGetters生成计算属性，从getters中读取数据，（数组写法） 
        ...mapGetters(['bigSum'])
    },
    methods: {
        // increment(){
        //    this.$store.commit('ADD',this.n)
        // },
        // decrement(){
        //    this.$store.commit('JIAN',this.n)
        // },

        // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)，
        // 也可以参照mapState 使用数组写法 
        ...mapMutations({increment:'ADD',decrement:'JIAN'}),

        //********************************************************************

        // incrementOdd(){
        //     this.$store.dispatch('ji',this.n)
        // },
        // incrementWait(){
        //     this.$store.dispatch('wait',this.n)       
        // }   

        // 
        ...mapActions({incrementOdd:'ji',incrementWait:'wait'})
    },
}
</script>

<style>
.a{
    width: 50px;
}
button {
    margin-left: 5px;
}
</style>